//函数式实现 todolist

import { useState } from "react";

function DemoA() {
    let [todo, setTodo] = useState('')
    let [list, setList] = useState([])

    let confirm = () => {
        if (!todo.trim()) return;

        setList([...list, { id: Date.now(), task: todo }])
        setTodo('')
    }
    let addByEnter = (e) => {
        if (e.keyCode === 13) {
            confirm();
        }
    }
    let delTodo = (id) => {
        setList(list.filter(ele => ele.id != id))
    }

    return (
        <div>
            <div>
                <input type="text" value={todo}
                    onChange={e => setTodo(e.target.value)}
                    onKeyUp={e => addByEnter(e)}
                />
                <button onClick={confirm} > 点击添加</button>
            </div>
            <hr />
            <div>
                {
                    list.map(item => (
                        <ul key={item.id}>
                            <li >
                                {item.task}
                                <button onClick={() => delTodo(item.id)}> 点击删除</button>
                            </li>
                        </ul>
                    ))
                }

            </div>
        </div >
    )
}

export default DemoA;